<template>
	<view>
		<u-sticky>
			<view class="tabBox flex-row-center-sb">
				<view v-if="item.type <=4 " class="tabItem" :class="{active : currentType == item.type}"
					v-for="(item,index) in tabs" :key="index" @click="currentType=item.type">
					{{ item.title }}
				</view>
				<view class="tabItem" v-if="orderDetail.orderInfo.orderStatus!=10">
					<view class="flex-row-center" @click.stop="showMore=!showMore">
						<text>更多操作</text>
						<u-icon :name="showMore ? 'arrow-up':'arrow-down'"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 基础信息 -->
		<order-basic-info v-if="currentType === 1" :orderDetail="orderDetail"
			@showOrderRemark="showOrderRemark=true"></order-basic-info>
		<!-- 违章信息 -->
		<order-illeagl-info v-if="currentType === 2" :list="orderDetail.carIllegalList"></order-illeagl-info>
		<!-- 续租信息 -->
		<order-relet-info v-if="currentType === 3 " :orderNo="orderNo" :reletList="reletList"></order-relet-info>
		<!-- 费用信息 -->
		<order-cost-info v-if="currentType === 4" :orderRent="orderRentDetail.rent_items"
			:receivableList="receivableList" :payableList="payableList" :orderVehicle="orderVehicleDetail.vehicle_items"
			:orderViolation="orderViolationDetail.violation_items"
			:orderPriceCalendars="orderRentDetail.orderPriceCalendars">
		</order-cost-info>
		<!-- 底部按钮 -->
		<!-- 	<order-operation v-if="orderDetail.orderInfo.orderStatus!=10" :orderInfo="orderDetail.orderInfo"
      :customerInfo="orderDetail.customerInfo"></order-operation> -->

		<moreNavigation v-if="showMore" :showHidden="showMore" :orderInfo="orderDetail.orderInfo"
			:customerInfo="orderDetail.customerInfo" @clickOpItem="clickOpItem"></moreNavigation>

		<u-popup :show="showPayCost" mode="center" @close="showPayCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx;">请选择缴纳费用项</view>
				<view class="flex-row-center-sb payCostItem" v-for="(item, index) in payCostList" :key="index"
					@click="changeCostItem(item)">
					<text>{{ item.remark }}</text>
					<view class="flex-row-center">
						<text style="color: red;margin-right: 10rpx;">待付:{{ item.unpaidAmount }}元</text>
						<image style="width: 40rpx;height: 40rpx;"
							:src="item.selected==true ? '/static/other/radio_selected.png' : '/static/other/radio_default.png'"
							mode=""></image>
					</view>
				</view>

				<view class="flex-row-center-sb" style="margin-top: 40rpx;width: 80%;">
					<view class="alertBtn" style="background-color: #F8F8F8;color: #BFC3CC;" @click="showPayCost=false">
						取消
					</view>
					<view class="alertBtn" @click="confimPayFee">确定</view>
				</view>

			</view>
		</u-popup>

		<!-- 新增费用弹框 -->
		<u-popup :show="showPopCost" mode="bottom" @close="showPopCost=false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx;">
				<view style="margin-bottom: 30rpx;">新增收费项</view>
				<uni-forms ref="form">
					<uni-forms-item label="收费项名称" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.chargeProjectName" placeholder="请输入收费项名称"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="收费类型" required>
						<uni-data-checkbox v-model="customCost.chargeItemsType" :localdata="chargeItemsTypes" />
					</uni-forms-item>

					<uni-forms-item label="单价" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.unitPrice" @input="check" type="digit" placeholder="请输入单价">
							</u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="数目" labelWidth="90" required>
						<view>
							<u--input v-model="customCost.number" type="number" placeholder="请输入数量"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="费用合计" labelWidth="90">
						<view>
							<text
								style="position: relative;top: 15rpx;">{{ customCost.number * customCost.unitPrice || '0' }}
							</text>
						</view>
					</uni-forms-item>

				</uni-forms>

				<view class="commitBtn" @click="commitCost">提交</view>
			</view>
		</u-popup>

		<u-popup :show="showOrderRemark" mode="bottom" @close="showOrderRemark = false" closeable round="20">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx;">
				<view style="margin-bottom: 30rpx;">提交订单说明</view>
				<uni-forms ref="form1" style="width: 100%">
					<uni-forms-item label="说明" required>
						<view>
							<u--textarea v-model="remark" placeholder="请输入500字以内的订单说明" count
								maxlength="500"></u--textarea>
						</view>
					</uni-forms-item>
				</uni-forms>

				<view class="commitBtn" @click="commitOrderRemark">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import orderBasicInfo from './component/orderBasicInfo.vue';
	import orderIlleaglInfo from './component/orderIlleaglInfo.vue';
	import orderReletInfo from './component/orderReletInfo.vue';
	import orderCostInfo from './component/otaOrderCostInfo.vue';
	import orderOperation from './component/orderOperation.vue';
	import moreNavigation from './component/otaMoreNavigation.vue';
	import * as orderApi from '@/api/order-api.js';
	import {
		orderRemark
	} from "@/api/order-api.js";

	export default {
		components: {
			orderBasicInfo,
			orderIlleaglInfo,
			orderReletInfo,
			orderCostInfo,
			orderOperation,
			moreNavigation
		},
		data() {
			return {
				orderNo: '',
				currentType: 1,
				showMore: false,
				showOrderRemark: false,
				remark: '',
				orderDetail: {
					orderInfo: {}
				},
				tabs: [{
						title: '基础信息',
						type: 1
					},
					{
						title: '违章信息',
						type: 2
					},
					// {
					// 	title: '续租信息',
					// 	type: 3
					// },
					{
						title: '费用信息',
						type: 4
					}
				],
				reletList: [],
				orderRentDetail: null,
				orderDepositDetail: null,
				orderIllegalDetail: null,
				orderVehicleDetail: null,
				orderViolationDetail: null,
				receivableList: null,
				payableList: null,

				showPayCost: false,
				payCostList: [],
				currentPayItem: null,
				showPopCost: false,
				chargeItemsTypes: [{
						value: 1,
						text: '按次'
					},
					{
						value: 2,
						text: '按天'
					},
					{
						value: 6,
						text: '按个'
					},
					// {
					// 	value: 3,
					// 	text: '按里程'
					// }
				],
				customCost: {
					chargeProjectName: '',
					chargeMoney: '',
					chargeItemsType: 1,
					canEdit: 3,
					number: '1',
					unitPrice: ''

				},

			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.orderNo = item.orderNo;
			uni.$on('refreshOrder', data => {
				this.refreshDetailInfo();
			});
			this.refreshDetailInfo();
		},
		methods: {
			// 提交订单说明
			commitOrderRemark() {
				if (uni.$u.test.isEmpty(this.remark)) {
					uni.$u.toast('请输入订单说明');
					return
				} else {
					orderApi.orderRemark({
						orderNo: this.orderNo,
						remarkContent: this.remark
					}).then(res => {
						this.showOrderRemark = false;
						this.remark = '';
						this.getOrderDetail();
					})
				}
			},
			clickOpItem(btnInfo) {
				this.showMore = false;
				let path = btnInfo.path;

				if (btnInfo.code == 999) { //费用补录
					uni.navigateTo({
						url: '/order/shortOrder/otaSupplementaryPayment?orderNo=' + this.orderNo
					})
				} else {
					const item = {
						orderNo: this.orderNo,
						memberName: this.orderDetail.customerInfo.memberName,
						orderStatus: this.orderDetail.orderInfo.orderStatus,
						memberType: this.orderDetail.customerInfo.memberType,
						memberPhone: this.orderDetail.customerInfo.memberPhone,
						modelName: this.orderDetail.orderInfo.modelName,
						rentalStartTime: this.orderDetail.orderInfo.rentalStartTime,
						rentalEndTime: this.orderDetail.orderInfo.rentalEndTime,
						actualStartTime: this.orderDetail.orderInfo.actualStartTime,
						actualEndTime: this.orderDetail.orderInfo.actualEndTime,
						carNo: this.orderDetail.carInfo.carNo,
						salesman: this.orderDetail.orderInfo.salesman,
						btnCode: btnInfo.code,
						reserveTakeStoreId: this.orderDetail.orderInfo.takeStoreId || '',
						reserveAlsoStoreId: this.orderDetail.orderInfo.alsoStoreId || '',
						leaseDays: this.orderDetail.orderInfo.leaseDays || 0,
					};

					uni.navigateTo({
						url: '/order/shortOrder/' + path + '?item=' + encodeURIComponent(JSON
							.stringify(item))
					});

				}
			},
			//确定提交费用项
			commitCost() {
				if (uni.$u.test.isEmpty(this.customCost.chargeProjectName)) {
					uni.$u.toast('请输入费用项名称');
					return
				} else if (uni.$u.test.isEmpty(this.customCost.unitPrice)) {
					uni.$u.toast('请输入单价');
					return
				} else if (uni.$u.test.isEmpty(this.customCost.number)) {
					uni.$u.toast('请输入数目');
					return
				} else if (this.customCost.number == '0') {
					uni.$u.toast('数目不能为0,请重新输入');
					return
				} else {
					this.customCost.chargeMoney = this.customCost.number * this.customCost.unitPrice
					orderApi.addNewExpenses({
						orderNo: this.orderNo,
						chargeItemsVo: [this.customCost]
					}).then(res => {
						uni.showToast({
							title: '新增费用成功'
						})
						this.showPopCost = false;
					})

				}
			},
			// 取消订单
			canleOrder() {

				uni.showModal({
					title: '提示',
					content: '确认取消订单吗?',
					cancelText: '取消',
					confirmText: '确认',
					success: (res) => {
						if (res.confirm) {
							orderApi.cancelAndRefund({
								orderNo: this.orderNo
							}).then(res1 => {
								if (res1.code == 1) {
									uni.$u.toast('取消成功');
									uni.$emit('refreshOrder');
									uni.navigateBack();
								}
							})
						}
					}
				})
			},
			//费用缴纳按钮
			paymentFee() {
				this.currentPayItem = null;
				this.payCostList = [];
				orderApi.getAllPaymentOfFees(this.orderNo).then(res => {
					let data = res.data;
					data.map(item => {
						if (item.unpaidAmount > 0 && item.payStatus == 1) {
							this.payCostList.push(item);
						}
					})
				})
			},
			changeCostItem(item) {
				this.payCostList.map(costItem => {
					costItem.selected = false;
				})
				item.selected = true;
				this.currentPayItem = item;
				this.$forceUpdate();
			},
			confimPayFee() {
				if (this.currentPayItem) {
					this.showPayCost = false;
					uni.navigateTo({
						url: '/order/shortOrder/orderPayFee?type=' + this.currentPayItem.type + '&orderNo=' + this
							.orderNo
					})
				} else {
					uni.$u.toast('请选择需要缴纳的费用项');
				}
			},
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.customCost.unitPrice = e;
				})
			},

			//刷新订单信息
			refreshDetailInfo() {
				this.getOrderDetail();

				// this.getReletList();
				this.getOrderRentDetail();
				this.getOtaOtherCost();
				// this.getOrderDepositDetail();
				// this.getOrderIllegalDetail();
				this.getOrderVehicleDetail();
				this.getOrderViolationDetail();
				this.paymentFee();
			},

			// 获取基础信息
			getOrderDetail() {
				uni.showLoading()
				orderApi.detail(this.orderNo).then(res => {
					uni.hideLoading();
					this.orderDetail = res.data;
				})
			},

			//续租列表
			getReletList() {
				var params = {
					orderNo: this.orderNo
				}
				orderApi.renewRecord(this.toParams(params)).then(res => {
					this.reletList = res.data;
					if (this.reletList.length > 0) {
						this.reletList.map(item => {
							item.isOpen = false;
						})
					}
				})
			},

			//租金
			getOrderRentDetail() {
				orderApi.orderRentDetail(this.orderNo).then(res => {
					this.orderRentDetail = res.data;
				})
			},

			//ota其他费用支出
			getOtaOtherCost() {
				orderApi.getSupplementaryPaymentList(this.orderNo).then(res => {
					this.receivableList = res.data.receivableList;
					this.payableList = res.data.payableList;
				})
			},

			//车辆押金
			getOrderDepositDetail() {
				orderApi.orderDepositDetail(this.orderNo).then(res => {
					this.orderDepositDetail = res.data;
				})
			},
			//违章押金
			getOrderIllegalDetail() {
				orderApi.orderIllegalDetail(this.orderNo).then(res => {
					this.orderIllegalDetail = res.data;
				})
			},
			//车损费用
			getOrderVehicleDetail() {
				orderApi.orderVehicleDetail(this.orderNo).then(res => {
					this.orderVehicleDetail = res.data;
				})
			},
			//违章费用
			getOrderViolationDetail() {
				orderApi.orderViolationDetail(this.orderNo).then(res => {
					this.orderViolationDetail = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderPage {
		padding-bottom: 110rpx;

		&.activePage {
			padding-bottom: 0;
		}
	}

	.tabBox {
		background-color: #fff;
		height: 92rpx;
		padding: 0 26rpx;

		.tabItem {
			font-size: 28rpx;
			color: #333333;

			&.active {
				color: #2879FF;

				&::after {
					content: '';
					display: block;
					width: 40rpx;
					height: 6rpx;
					background: #2879FF;
					border-radius: 3rpx;
					position: relative;
					left: 30rpx;
					top: 4rpx;
				}

			}
		}
	}

	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.alertBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #1673FF;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>